<template>
  <div class="check-apply">
    <!-- <el-steps :active="activeStep" align-center>
      <el-step v-for="(step,i) in steps" :key="i" :title="step.title" :description="step.desc" />
    </el-steps> -->
    <c-section title="门店建设基本信息">
      <c-list :column="3">
        <c-list-item label="门店编码" :value="detail.shopCode" />
        <c-list-item label="门店" :value="detail.shopName" />
        <c-list-item label="所属客户编码" :value="detail.clientCode" />
        <c-list-item label="所属客户" :value="detail.clientName" />
        <c-list-item label="所属办事处" :value="detail.officeName" />
        <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="detail.shopType" />
        <c-list-item label="门店业务类型" dict-type-code="BIZ_TYPE" :value="detail.shopBizType" />
        <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="detail.shopCityLevel" />
        <c-list-item label="门店详细地址" :value="detail.shopAddress" :span="2" />
        <c-list-item label="门店经营面积" suffix="m²" :value="detail.shopArea" />
        <c-list-item label="门店建设项目号" :value="detail.constCode" />
        <c-list-item label="报图类型" dict-type-code="MARKET_TYPE" :value="detail.marketType" />
        <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="detail.constType" />
        <c-list-item label="商家类别" dict-type-code="BIZMAN_TYPE" :value="detail.bizmanType" />
        <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationFormCal || detail.decorationForm" />
        <c-list-item label="门店建设范围" dict-type-code="DECORATION_RANGE" :value="detail.decorationRange" />
        <c-list-item label="验收类型" dict-type-code="ACCEPT_TYPE" :value="detail.acceptType" />
        <!-- <c-list-item label="验收申请提报人" :value="detail.applyInformantName" /> -->
        <c-list-item label="验收申请提报人" :value="$store.getters.currUser.userName" />
        <!-- <c-list-item label="验收申请提报时间" :value="detail.applyReportTime" /> -->
        <c-list-item label="验收申请提报时间" :value="nowTime" />
        <c-list-item label="是否含公装" dict-type-code="BOOLEANS" :value="detail.haveFrock" />
        <c-list-item label="工程监理" :value="detail.proSupervisorName" />
        <c-list-item label="形象督导" :value="detail.formSupervisorName" />
        <c-list-item label="施工单位" :value="detail.constUnitName" />
        <c-list-item label="施工单位负责人" :value="detail.principal" />
        <c-list-item label="装修范围" dict-type-code="DECORATION_RANGE" :value="detail.decorationRange" />
        <!-- <c-list-item label="预计验收申请提报时间" :value="detail.expectAcceptApplyReportTim" /> -->
        <!-- <c-list-item label="是否超时未报验" dict-type-code="BOOLEANS" :value="detail.isUninspectionOutTime" /> -->
      </c-list>
      <c-list ref="form" :model="formData" :rules="formRules" label-width="100px">
        <c-list-item label="是否验收" prop="isAccept">
          <c-dict-select v-model="formData.isAccept" dict-type-code="BOOLEANS" @change="isAcceptChange" />
          <span v-show="formData.isAccept==='0'" style="color: #F56C6C;margin-left:10px">您当前选择的结果为否，则审批通过后，所选择的装修任务将不再验收，直接结案，也不再参与返利，请慎选</span>
        </c-list-item>
        <c-list-item :rules="[{ required: true, message:account.length>0 ?'请选择客户经理':'所属客户下未配置业务账号,没有选择数据', trigger: 'change' }]" label="客户经理" prop="clientManagerCode">
          <c-single-dialog
            ref="clientManagerCode"
            v-model="formData.clientManagerCode"
            :label.sync="formData.clientManagerName"
            :props="{label:'name',value:'adAccount'}"
            :disabled="account.length===0"
            :focus-query="true"
            :multiple="false"
            :config="{
              title:'客户经理',
              width:'600px',
              interfacePath: '/slm-admin/api/v1/user/listCustomerManagerByAccounts',
              method:'post',
              paramField:'',
              filtersRaw:filtersRaw,
              paramsRaw:{},
              setting:[
                {prop:'adAccount',title:'编码',width:80},
                {prop:'name',title:'名称',width:200},
                {prop:'tel',title:'电话',width:200}
              ]
            }"
          />
        </c-list-item>
        <c-list-item v-if="formData.isAccept==='0'" label="不验收原因" prop="unacceptReason">
          <el-input v-model="formData.unacceptReason" type="textarea" maxlength="1024" show-word-limit :autosize="{minRows:3}" placeholder="不验收原因" clearable />
        </c-list-item>
      </c-list>
    </c-section>
    <c-section title="关联装修数据">
      <c-table-box hide-func :data="tableData" :table-config="tableConfig" />
    </c-section>
    <c-section title="报验资料上传">
      <c-file-list v-model="files" :model-id="$route.query.id" view-type="image" type-code="ACCESS027" />
    </c-section>
    <div class="btn-container">
      <c-button @click="cancelHandle">取消</c-button>
      <c-button type="primary" @click="saveHandle">保存</c-button>
      <c-button type="primary" @click="submitHandle">提交</c-button>
    </div>
  </div>
</template>
<script>
import { getApplyDetail, postAddOrEdit, postApplyCommit, getCustomerCode, postAccountPage } from '@/api/check'
import { otherFiltersItem } from '@/utils'
// import ImportImg from '@/components/importImg'
// import { getShopAttachment } from '@/api/common'
export default {
  name: 'CheckHardApply',
  components: {
    // ImportImg
  },
  data() {
    return {
      detail: {},
      files: [],
      activeStep: 1,
      customerCode: 'null',
      steps: [
        {
          title: '步骤1',
          desc: '验收基础资料维护'
        },
        {
          title: '步骤2',
          desc: '验收区域及面积填报'
        },
        {
          title: '步骤3',
          desc: '验收问题明细'
        }
      ],
      formData: {
        isAccept: '',
        clientManagerCode: '',
        clientManagerName: '',
        unacceptReason: ''
      },
      formRules: {
        isAccept: [{ required: true, message: '请选择是否验收', trigger: 'change' }]
        // clientManagerCode: [{ required: true, message: '请选择客户经理', trigger: 'change' }]
      },
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'decorationTaskCode',
            width: 200,
            label: '装修任务号'
          },
          {
            prop: 'nature',
            label: '装修性质',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_NATURE'
            }
          },
          {
            prop: 'actualApproachTime',
            label: '装修进场时间',
            formatData: this.$parseTimeYMD('actualApproachTime')
          },
          {
            prop: 'actualEndTime',
            label: '装修完工时间',
            formatData: this.$parseTimeYMD('actualEndTime')
          },
          {
            prop: 'range',
            label: '装修范围',
            render(h, row) {
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'DECORATION_RANGE',
                  value: row.range
                }
              })
            }
          },
          {
            prop: 'shopWholeTotalArea',
            label: '对应整装图纸总面积'
          },
          {
            prop: 'shopSimpleTotalArea',
            label: '对应简装图纸总面积'
          },
          {
            prop: 'softwearTaskCode',
            label: '对应软装陈列任务号'
          }
        ]
      },
      tableData: [],
      account: [],
      nowTime: ''
    }
  },
  computed: {
    filtersRaw() {
      return [otherFiltersItem('accounts', `${this.account.join(',')}`, 'in')] // 没有错，不加[]
    }
  },
  created() {
    this.getDetail()
    this.getCustomerCode()
    this.nowTime = this.$parseTime(new Date())
  },
  methods: {
    async getCustomerCode() {
      if (this.$route.query.clientCode) {
        this.customerCode = this.$route.query.clientCode
      } else {
        await getCustomerCode(this.$route.query.shopCode).then(customerCode => {
          this.customerCode = customerCode
        })
      }
      return await postAccountPage(this.customerCode).then(res => {
        this.account = res.data.records.map(e => e.code)
        if (!this.account || this.account.length === 0) this.$message.warning('业务账号未配置,不能报验数据')
      })
    },
    isAcceptChange(v) {
      // 仅“是否报验”值选择“否”时，此字段展示且必填
      if (v === '0') {
        this.$set(this.formRules, 'unacceptReason', [{ required: true, message: '请输入不验收原因', trigger: 'change' }])
      } else {
        this.$set(this.formRules, 'unacceptReason', [])
        this.$refs.form.clearValidate(['unacceptReason'])
      }
    },
    handlerData(data) {
      for (const key of Object.keys(this.formData)) {
        let v = data[key]
        if (/^\d+$/.test(v)) {
          v = v.toString()
        }
        v === undefined ? v = '' : ''
        this.$set(this.formData, key, v)
      }
      this.isAcceptChange(this.formData.isAccept)
    },
    getDetail() {
      const { id } = this.$route.query
      getApplyDetail(id).then(res => {
        this.handlerData(res.data)
        this.detail = res.data
        this.tableData = this.detail.shopDecorationList || []
      })
    },
    cancelHandle() {
      this.$store.dispatch('views/goFirst')
    },
    postData() {
      return this.$refs.form.validate().then(() => {
        const files = this.$getFiles(this.files, this.$route.query.id)
        if (files.filter(e => e.dr !== '1' && e.dr !== 1).length === 0) {
          this.$message.warning('至少上传一个报验资料！')
          return Promise.reject('')
        }
        const data = {
          ...this.formData,
          id: this.$route.query.id,
          constCode: this.detail.constCode,
          applyInformantCode: this.$store.getters.currUser.account,
          applyInformantName: this.$store.getters.currUser.userName,
          applyReportTime: this.$parseTime(new Date()),
          files
        }
        return data
      })
    },
    saveHandle() {
      return this.postData().then(data => {
        return postAddOrEdit(data).then(res => {
          this.$message.success('操作成功！')
          this.$store.dispatch('views/goFirst')
        })
      })
    },
    submitHandle() {
      return this.postData().then(data => {
        return postApplyCommit(data).then(res => {
          this.$message.success('操作成功！')
          this.$store.dispatch('views/goFirst')
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.check-apply{

}
</style>
